<template>
    <div class="personalInfo">
      <x-header class="header" :left-options="{showBack: showHeaderBack}">个人信息</x-header>
      <div class="topHolder"></div>
      <flexbox orient="vertical">
        <flexbox-item>
          <div class="avatar" @click="debugMode">
            <x-img :src="src" :offset="0"></x-img>
          </div>
        </flexbox-item>
      </flexbox>
      <group>
        <cell title="会员号" :is-loading="memberId == ''" :value="memberId"></cell>
        <cell title="手机号" :is-loading="phone == ''" :value="phone"></cell>
        <cell title="微信名称" :is-loading="weixinInfo.nickname == ''" :value="weixinInfo.nickname"></cell>
      </group>
      <group-title>注：如需修改手机号码请到店联系工作人员修改！</group-title>
    </div>
</template>

<script>
  import {getUserInfo,contextPath} from '../api'
  import { XHeader, Flexbox, FlexboxItem ,XImg , Group, Cell, GroupTitle, cookie  } from 'vux'
  import {message} from "../common/util";

  export default {
    name:'personalInfo',
    components:{
      XHeader,
      Flexbox,
      FlexboxItem,
      XImg,
      Group,
      Cell,
      GroupTitle
    },
    data(){
      return {
        showHeaderBack:this.GLOBAL.showHeaderBack,
        src:require('../assets/images/defaultAvatar.jpg'),
        memberId:'',
        name:'',
        phone:'',
        loadingStatus:true,
        contextPath:contextPath,
        clickTime:0
      }
    },
    computed:{
      weixinInfo(){
        return JSON.parse(sessionStorage.getItem("user"))
      },
      localUserInfo:{
        get () {
          return this.$store.getters.getLocalUserInfo
        },
        set (value) {
          this.$store.commit('updateLocalUserInfo', value)
        }
      }
    },
    methods:{
      debugMode(){
        this.clickTime++
        if (this.clickTime >= 2 && this.clickTime < 5){
          if(JSON.parse(localStorage.getItem('debugMode')))
            message({message: '再点' + (5 - this.clickTime) + '次退出开发者模式',type: 'info'})
          else
            message({message: '再点' + (5 - this.clickTime) + '次进入开发者模式',type: 'info'})
        }else if (this.clickTime >= 5) { //大于点击次数
          this.clickTime = 0
          localStorage.setItem('debugMode',!JSON.parse(localStorage.getItem('debugMode')))
          if(JSON.parse(localStorage.getItem('debugMode')))
            message({message: '已进入开发者模式：请刷新系统以显示vconsole',type: 'info',time:3500})
          else
            message({message: '已退出开发者模式：请刷新系统以关闭vconsole',type: 'info',time:3500})
        }
      }
    },
    mounted(){
      this.src = this.weixinInfo.headimgurl
      return new Promise((resolve, reject)=>{
        if(JSON.stringify(this.localUserInfo) == '{}')
          getUserInfo().then((res)=>{
            //console.log(res)
            if(res.status == 'success'){
              this.localUserInfo = res.data
              //this.$store.commit('updateLocalUserInfo',res.data)
            }else if(res.status == 'error'){
              console.log('getUserInfo error info:',res.msg)
              message({message:res.msg,type: 'error'})
            }
            resolve()
          }).catch((err)=>{console.log('getUserInfo catch info:',err)})
        else resolve()
      }).then(()=>{
        let {MEMBER_NUMBER,PHONE,INTEGRAL} = this.localUserInfo
        this.memberId = MEMBER_NUMBER
        this.phone = PHONE
        this.loadingStatus = false
        this.$store.commit('updateLoadingStatus',{isLoading:false})
      })
    }
  }
</script>

<style lang="scss" scoped>
  .personalInfo{
    .avatar{
      margin-top:1rem;text-align: center;
      img{width:7rem;border-radius: 7rem;box-shadow: 0 0 10px 1px #e0e0e0;}
    }
  }
</style>
